import React, { useState, useEffect } from 'react';

const Father = () => {
    const [count, setCount] = useState(0);
    const [user, setUser] = useState({ name: '林诗音', age: 30 })
    //
    // 使用useEffect
    // 方式1: 
    // 特点: 初始化执行 , 数据更新执行  
    // useEffect(() => {
    //     console.log('count', count);
    // })

    // 方式2: 
    // 初始化执行 count-1, 当数据更新时, 先执行 闭包函数 count-2, 此时count-2还是未更新前的数据.
    // 再执行count-1
    // useEffect(() => {
    //     console.log('count-1', count);
    //     return () => {
    //         console.log('count-2', count);
    //     }
    // })

    // 方式3:
    // 特点: 初始化执行 count-1 , return 返回的闭包函数始终不执行,所以可以删掉
    // 一般在该种方式中进行数据请求
    // useEffect(() => {
    //     console.log('count-1', count);
    //     // 进行数据的请求
    //     // return () => {
    //     //     console.log('count-2', count);
    //     // }
    // }, [])

    // 方式4:
    // 参数2 : 为依赖的值,数组结构,可以监听多个值,或者说监听的值, 将监听或依赖的值发生变化, 则重新执行参数1 这个箭头函数
    // 如果参数1 有闭包函数, 则先执行闭包函数, 在执行参数1函数
    // 特点:  初始化执行count-1, 当监听的数据count 发生变化,再执行count-2.然后再执行count-1

    useEffect(() => {
        console.log('count-1', count);
        // return () => {
        //     console.log('count-2', count);
        // }
    }, [count])
    return (
        <div>
            <p onClick={() => {
                setCount(count + 1)
            }}>count:{count}</p>

            {/* user */}
            <p onClick={() => {
                setUser({
                    ...user,
                    age: user.age + 1
                })
            }}>{user.name}-{user.age}</p>
        </div>
    );
}

export default Father;
